<!--<template>-->
<!--  <div class="rcap-container">-->
<!--    <Header title="日程安排"></Header>-->
<!--    <div class="warpper">-->
<!--      <img src="~@/assets/img/rcap-page.jpg" alt="" class="full-width"/>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->
<template>
  <div class="rcap-container">
    <Header title="日程安排（2021年12月）"></Header>
    <div class="warpper">
      <!--      <van-cell title="选择日期查询" :value="date" @click="show = true"/>-->
      <van-tabs @change="tabChange" v-model="active">
        <van-tab v-for="(item,index) in tabs" :key="index" :title="item.title"></van-tab>

      </van-tabs>

      <!--      <van-calendar v-model="show" :min-date="minDate"-->
      <!--                    :max-date="maxDate" @confirm="onConfirm"/>-->
      <img src="~@/assets/img/rcap-header.jpg" class="full-width"/>
      <div class="content">
        <div class="border-box">
          <div class="date">{{ date | formatterDate }}</div>
          <div v-for="(item,index) in list" :key="index" class="flex-center-between cell">
            <div class="left">
              <van-tag color="#59c0c7" size="large" class="time">{{ item | stime }}</van-tag>
              <div class="flex">
                <p class="do text-center" v-html="phaseDetailFilter(item.affair)">
                </p>
              </div>

            </div>
            <div class="address">{{ item.place }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/'
import { getDoctorSchedules } from 'api/home'

export default {
  data() {
    return {
      active: 0,
      tabs: [
        { title: '17日', date: '2021-12-17' },
        { title: '18日', date: '2021-12-18' },
        { title: '19日', date: '2021-12-19' },
        { title: '20日', date: '2021-12-20' },
        { title: '21日', date: '2021-12-21' }
      ],
      date: '2021-12-17',
      show: false,
      minDate: new Date(2021, 10, 18),
      maxDate: new Date(2021, 10, 21),
      list: []
    }
  },
  created() {
    this.getData()
  },
  filters: {
    formatterDate(data) {
      let arr = data.split('-')
      return `${arr[1]} 月 ${arr[2]} 日`
    },
    stime(item) {
      if (item.stimeb != '' && item.stimee != '') {
        return `${item.stimeb} - ${item.stimee} `
      } else if (item.stimeb != '') {
        return item.stimeb
      }
    }
  },
  methods: {
    phaseDetailFilter(val) {
      const value = val.replace(/&lt;br\/&gt;/g, '<br/>')
      return value
    },
    tabChange(index) {
      this.date = this.tabs[index].date
      this.getData()
    },
    getData() {
      getDoctorSchedules(this.date).then(res => {
        if (res.code == '200') {
          this.list = JSON.parse(res.data)
        } else {
          this.$dialog.alert({
            title: '错误信息',
            message: res.msg
          })
        }
      })
    },
    onConfirm(date) {
      this.date = parseTime(date, '{y}-{m}-{d}')
      this.getData()
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
.rcap-container {
  height: 100vh;
  background: url('~@/assets/img/base-map.jpg') center center no-repeat;
  background-size: 100% 100%;
  overflow: scroll;

  .content {
    padding: 10px 10px 0;

    .border-box {
      padding: 50px 10px 10px;
      background: url('~@/assets/img/border.png') center center no-repeat;
      background-size: 100% 100%;
      position: relative;

      .date {
        position: absolute;
        position: absolute;
        top: 0px;
        color: white;
        font-size: 18px;
        font-weight: bold;
        left: 34px;
        padding: 2px 8px;
        border-radius: 5px;
        background: linear-gradient(to right, #75c19b, #0071ab);
        box-sizing: border-box;
      }

      .cell {
        padding: 8px 10px 8px 15px;
        margin-bottom: 15px;
        background: #21479c;
        border-radius: 5px;
        color: white;
        font-size: 15px;
        box-shadow: #999999 0px 0px 2px;

        .left {
          flex: 1;
          box-sizing: border-box;
          margin-right: 30px;

          .time {
            padding: 2px 5px;
          }

          .do {
            margin-top: 5px;
          }
        }

        .address {
          width: 100px;
          text-align: center;
        }
      }
    }
  }
}
</style>

